<extend name="common/base" />
<block name="resource">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/swiper.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/match.css?v=1.0.1"/>
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/swiper.jquery.min.js"></script>
    <script type="text/javascript" src="http://player.ucloud.com.cn/release/js/ump.player_v1.min.js"></script>
    <script src="__PUBLIC__/Home/ui3/js/jwplayer/jwplayer.js?v=1.0"></script>
    <!-- 表情核心JS -->
    <script src="__PUBLIC__/Home/ui3/js/face.js" type="text/javascript"></script>
    <!-- 分页JS -->
    <script src="__PUBLIC__/Home/ui3/js/web/paging.js" type="text/javascript"></script>
    <!-- 替换表情文字 -->
    <script src="__PUBLIC__/Home/ui3/js/web/emotion.js?v=1.0" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/scroll.js?v=1.0" type="text/javascript"></script>

    <script src="__PUBLIC__/Home/ui3/js/web/share/comment.js?v=1.0.1" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/share/match.js?v=1.0.3" type="text/javascript"></script>
    <script>
        window._THIS = {
            detailUrl : "{:U('api/match/detailNew', ['race_id' => $video['id'], 'appid' => $appid])}",
            recentResultUrl : "{:U('match/recentResult', ['id' => $video['id']])}",
            userLink : "{:U('Others/index')}",
            matchUrl : "{:U('share/match')}",
            commentUrl : {
                get : "{:U('video/getCommentList')}",
                post : "{:U('video/comments')}",
            },
            commentPager : 20,
            shareParam : {
                url : _COMMON.DOMAIN + "{:U('share/match', ['id' => $video['id']])}",
                text : '',
                img : '',
            },
            barrageUrl : "{:U('share/barrageUcloud', ['id' => $video['id']], '', true)}.txt",
        };

        //伐木累分享
        var famulei_share = function(){
            var url = 'http://www.famulei.com/share_publish';
                url += '?title=' + encodeURIComponent(_THIS.shareParam.text);
                url += '&video_url=' + encodeURIComponent(_COMMON.DOMAIN + "{:U('VideoPlay/play', ['id' => $video['id']])}");
                url += '&video_image=' + encodeURIComponent(_THIS.shareParam.img);
            window.open(url);
        }

        function dataInit() {
            var self = {$userInfo|json_encode};
            if (self) {
                viewModel.self({
                    'id' : self.id,
                    'avatar' : self.avatar ? self.avatar : _COMMON.DEFAULT_AVATAR,
                    'nickname' : self.nickname,
                });
            }

            $.get(_THIS.detailUrl, function(data, textStatus, xhr) {
                if (data.code == 200) {
                    _THIS.shareParam.img = data.data.thumb;
                    _THIS.shareParam.text = data.data.detail;

                    var game = data.data.game;
                    if (game && game.background) {
                        $('.main').css({
                            'background-image': 'url("'+game.background+'")',
                            'background-size': '100% 100%'
                        });
                    }
                    viewModel.matchInfo(getBaseInfo(data.data));
                    viewModel.recommend(getRecommend(data.data.recommend));
                    viewModel.videoList(getVideoList(data.data.videos));

                    initSwiper();
                    initPlayer();
                }
            });
            $.get(_THIS.recentResultUrl, function(data, textStatus, xhr) {
                if (data.state == 0) {
                    viewModel.recentResult.team1(data.data[0]);
                    viewModel.recentResult.team2(data.data[1]);
                }
            });

            viewModel.id = {$video.id};
            changeCommentPage(1, null);

            // window.player = new ump.Player();
            // var interfaceReady = false;

            // var params = {
            //     // bulleturl : _THIS.barrageUrl,
            // };

            // player.onInited = function () {
            // };

            // player.onError = function (info) {
            // };

            // player.create({
            //     width: 960,
            //     height: 540,
            //     modId: "mod_player",
            //     params: params
            // });
            playIndex = 0;
            
        }
        function initPlayer() {
            jwplayer("mod_player").setup({
                flashplayer: _COMMON.PUBLIC+"/Home/ui3/js/jwplayer/jwplayer.flash.swf",
                image: "",
                file: viewModel.videoList()[0].uri,
                controlbar: "over",  //控制条位置
                screencolor: "#fff",   //播放器颜色
                stretching: "fill",    //画面自适应
                repeat:false,       //重复播放
                autostart:true,         //自动播放
                //mute: true,             //静音
                events:{
                    onComplete: function(e){ 
                        playNext();
                    },
                    // onPlay: function(){},
                    // onVolume: function(){ alert("声音大小改变!!!"); },
                    // onReady: function(){console.log("准备就绪!!!"); },
                    // onPause: function(){ alert("暂停!!!");}
                },

                width: "100%",
                aspectratio: "16:9",
                // modes: [
                //   { type: 'html5' },
                //   { type: 'flash', 'src': 'jwplayer.flash.swf' },
                //   { type: 'download' }
                // ]
            });
        }
    </script>
</block>

<block name="content">
<div class="main">
    <div class="main-title">
        <div class="team team1">
            <div class="team-fight-title">近日战况</div>
            <!-- ko if:recentResult.team1().length > 0 -->
            <div class="team-fights" data-bind="foreach:recentResult.team1">
                <div class="fight-items">
                    <div class="fight-items-box">
                        <a href="" data-bind="attr:{'href':url}">
                            <div class="fight-item fight-item-time" data-bind="text:race_date"></div>
                            <div class="fight-item fight-item-team" data-bind="text:competitor"></div>
                            <div class="fight-item fight-item-score" data-bind="text:score"></div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if:recentResult.team1().length == 0 -->
            <div class="team-fights-null">暂无比赛</div>
            <!-- /ko -->
        </div>
        <div class="match-infos" data-bind="with:matchInfo">
            <div class="team1-logo">
                <a href="javascript:void(0);">
                    <img src="" alt="" data-bind="attr:{'src':team1.logo, 'alt':team1.name}"/>
                </a>
            </div>
            <div class="team-match">
                <div class="match-title" data-bind="text:detail"></div>
                <div class="ceshi">
                    <div class="team1-name">
                        <div class="win">
                            <p class="result" data-bind="css:{winner:team1.is_winner, loser:!team1.is_winner}, text:team1.is_winner?'胜':'负'"></p>
                            <p class="team-nick" data-bind="text:team1.name"></p>
                        </div>
                    </div>
                    <div class="line1"></div>
                    <div class="match-time" data-bind="text:score"></div>
                    <div class="line2"></div>
                    <div class="team2-name">
                        <div class="lose">
                            <p class="result" data-bind="css:{winner:team2.is_winner, loser:!team2.is_winner}, text:team2.is_winner?'胜':'负'"></p>
                            <p class="team-nick" data-bind="text:team2.name"></p>
                        </div>
                    </div>
                </div>
                <!-- ko if: schedule.length > 1-->
                <div class="match-num">
                    <!-- ko if: schedule.length <= 3 -->
                    <ul data-bind="foreach:schedule">
                        <li class="" data-bind="css:{active: is_current}, text:text, click:click"></li>
                    </ul>
                    <!-- /ko -->
                    <!-- ko if: schedule.length > 3 -->
                    <div class="swiper-container1">
                        <div class="swiper-wrapper" data-bind="foreach:schedule">
                            <div class="swiper-slide" data-bind="css:{hover: is_current}, text:text, click:click"></div>
                        </div>
                    </div>
                    <div class="swiper-button-prev1"></div>
                    <div class="swiper-button-next1"></div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
            </div>
            <div class="team2-logo">
                <a href="javascript:void(0);">
                    <img src="" alt="" data-bind="attr:{'src':team2.logo, 'alt':team2.name}"/>
                </a>
            </div>
        </div>
        <div class="team team2">
            <div class="team-fight-title">近日战况</div>
            <!-- ko if:recentResult.team2().length > 0 -->
            <div class="team-fights" data-bind="foreach:recentResult.team2">
                <div class="fight-items">
                    <div class="fight-items-box">
                        <a href="" data-bind="attr:{'href':url}">
                            <div class="fight-item fight-item-time" data-bind="text:race_date"></div>
                            <div class="fight-item fight-item-team" data-bind="text:competitor"></div>
                            <div class="fight-item fight-item-score" data-bind="text:score"></div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if:recentResult.team2().length == 0 -->
            <div class="team-fights-null">暂无比赛</div>
            <!-- /ko -->
        </div>
    </div>
    <div class="main-box">
        <div class="box-right">
            <div class="video-box">
                <div id="mod_player"></div>
            </div>
            <div class="video-share">
                <div class="share-logo"></div>
                <div class="video-share-span">分享到：</div>
                <div id="share">
                    <div class="bdsharebuttonbox">
                        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                        <a href="#"class="bds_tsina"data-cmd="tsina"title="分享到新浪微博"></a>
                        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_weixin"data-cmd="weixin"title="分享到微信"></a>
                        <a class="bds_other" data-bind="click:famulei_share" title="分享到伐木累"></a>
                    </div>
                </div>
                <!-- <div class="publish-dm JS-comment_box">
                    <textarea placeholder="输入弹幕内容，发条弹幕试试吧。"></textarea>
                    <button class="btn forbiden" data-bind="click:postComment">发送弹幕</button>
                </div> -->
            </div>
        </div>
        <div class="box-left">
            <div class="left-title">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-prev2"></div>
                <div class="title1">精彩战况</div>
                <div class="title2">文字</div>
                <div class="title3 active">图文</div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-next2"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper" data-bind="foreach:videoList">
                    <div class="swiper-slide" data-slide="" data-bind="attr:{'data-slide':index}, click:play, css:{active:is_current}">
                        <div class="item-head">
                            <div class="item-time" data-bind="text:time_point"></div>
                            <div class="item-message" data-bind="text:title"></div>
                        </div>
                        <div class="item-video">
                            <img src="" alt="" data-bind="attr:{'src':thumb}"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-container2">
                <div class="swiper-wrapper" data-bind="foreach:videoList">
                    <div class="swiper-slide" data-slide="" data-bind="attr:{'data-slide':index}, click:play, css:{active:is_current}">
                        <div class="item-head2">
                            <div class="item-time" data-bind="text:time_point"></div>
                            <div class="item-message2" data-bind="text:title"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="comment-bg">
    <div class="comment">
        <div class="comment-left JS_comment_top">
            <div class="comment-left-title">
                <span>全部评论</span><span class="comment-num">(<!-- ko text:commentCount --><!-- /ko -->)条</span>
            </div>
            <div class="comment-null" data-bind="visible:commentCount() < 1 && !commentLoading()">
                <div class="null-pic"></div>
                <p>还没有人评论过</p>
                <p>沙发虚位以待，快来抢吧！</p>
            </div>
            <div class="load-more" data-bind="visible:commentLoading()">
                <i><img src="__PUBLIC__/Home/ui3/images/loading-white.gif" alt="正在加载，请稍候..."/></i>
                <span>正在加载，请稍候...</span>
            </div>
            <div class="itme-box" data-bind="foreach:commentList">
                <div class="comment-item JS-comment_item">
                    <div class="avatar relative">
                        <a href="javascript:void(0);" data-bind="attr:{'href':isValidUser ? userLink : 'javascript:void(0);'}">
                            <img src="" alt="" data-bind="attr:{'src':avatar,'alt':nickname}"/>
                            <!-- ko if:auth -->
                            <img src="" title="" class="newG-icon" data-bind="attr:{'src':auth.pic, 'title':auth.name}">
                            <!-- /ko -->
                        </a>
                    </div>
                    <div class="comment-infos">
                        <div class="comment-name">
                            <div class="comment-nickname" data-bind="text:nickname"></div>
                            <div class="comment-level" data-bind="text:level"></div>
                        </div>
                        <div class="comment-content" data-bind="html:content"></div>
                        <div class="comments">
                            <span data-bind="text:floor"></span>
                            <span>来自66play网页</span>
                            <span class="reply" title="回复TA" data-bind="click:reply.show">回复TA</span>
                            <span class="time" data-bind="text:create_time"></span>
                        </div>
                        <div class="reply-info JS-comment_box">
                            <div class="avatar">
                                <img src="" alt="" data-bind="attr:{'src':viewModel.self().avatar, 'alt':viewModel.self().nickname}"/>
                            </div>
                            <div class="reply-box">
                                <div class="top-arr"></div>
                                <div class="txt-box">
                                    <textarea id="" class="input1" data-bind="attr:{'id':'comment_c_'+id}"></textarea>
                                </div>
                                <div class="qqface-box">
                                    <input type="button" class="sub_btn myBtn" value="发表" data-bind="click:postComment">
                                    <input type="button" class="cancel_btn btn btn-default" value="取消" data-bind="click:reply.hide">
                                    <i id="em1" class="emotion"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearflaot"></div>
                </div>
            </div>
            <div class="page">
                <ul data-bind="visible:commentPaging().length > 1, foreach:commentPaging">
                    <li data-bind="css:{'active': is_current, 'next-page':is_next}, click:click">
                        <a href="javascript:void(0);" data-bind="text:text"></a>
                    </li>
                </ul>
            </div>
            <div class="write-comment">
                <div class="write-title">写评论</div>
                <div class="reply-box JS-comment_box">
                    <div class="txt-box">
                        <textarea id="JS_comment_a" class="input1"></textarea>
                    </div>
                    <div class="qqface-box">
                        <input type="button" class="sub_btn myBtn" data-bind="click:postComment" value="发表">
                        <i class="emotion" id="em"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="comment-right">
            <div class="comment-right-title">其他比赛推荐</div>
            <!-- ko if:recommend().length > 0 -->
            <div class="item-box" data-bind="foreach:recommend">
                <div class="right-item">
                    <a href="" data-bind="attr:{'href':link}">
                        <div class="right-item-head">
                            <div class="game-logo">
                                <img src="" alt="" data-bind="attr:{'src':logo, 'alt':title}"/>
                            </div>
                            <div class="game-info">
                                <span class="game-title" data-bind="text:title"></span>
                                <span class="game-time game-time1" data-bind="text:date"></span>
                                <span class="game-time game-time2"></span>
                            </div>
                        </div>
                        <div class="right-item-content">
                            <div class="right-team1">
                                <div class="right-team1-logo">
                                    <img src="" alt="" data-bind="attr:{'src':team1.logo, 'alt':team1.name}"/>
                                </div>
                                <div class="team-name1" data-bind="text:team1.name"></div>
                            </div>
                            <div class="game-score ">
                                <div class="score-num">
                                    <a class="num1"><!-- ko text:score[0]--><!-- /ko --><div class="hr"></div></a>
                                    <a class="num">:</a>
                                    <a class="num2"><!-- ko text:score[1]--><!-- /ko --><div class="hr"></div></a>
                                </div>
                                <!-- ko if: schedule.length > 1-->
                                <div class="schedule" data-bind="foreach:schedule">
                                    <a href="" data-bind="attr:{'href':link}, text:index"></a>
                                </div>
                                <!-- /ko -->
                            </div>
                            <div class="right-team2">
                                <div class="right-team1-logo">
                                    <img src="" alt="" data-bind="attr:{'src':team2.logo, 'alt':team2.name}"/>
                                </div>
                                <div class="team-name1" data-bind="text:team2.name"></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if:recommend().length == 0 -->
            <div class="item-box-null">
                <div class="item-box-null-pic"></div>
                <p>暂无比赛</p>
            </div>
            <!-- /ko -->
        </div>
    </div>
</div>
</block>